<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WBC电商平台 - 后台管理</title>

    <link href="../../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/index.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

    <!--顶部导航条-->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">WBC电商平台</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html">商品管理</a></li>
                    <li><a href="classify.html">类别管理</a></li>
                    <li><a href="users.html">用户管理</a></li>
                    <li><a href="classify.html">订单管理</a></li>
                    <!-- <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li> -->
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <!--页面主体-->
    <div class="container">

        <div class="row">
            <div class="col-md-6">
                <div class="btn-group">
                    <button id="newBtn" type="button" class="btn btn-success">新增商品</button>
                    <button id="updateBtn" disabled type="button" class="btn btn-warning">修改商品</button>
                    <button id="delBtn" disabled type="button" class="btn btn-danger">删除商品</button>
                    <button disabled type="button" class="btn btn-info">下架</button>
                    <button disabled type="button" class="btn btn-info">上架</button>
                </div>
            </div>
            <div class="col-md-3 col-md-offset-3">
                <div class="input-group">
                    <input id="searchIpt" type="text" class="form-control">
                    <span class="input-group-btn">
                        <button id="searchBtn" class="btn btn-default" type="button">查找</button>
                    </span>
                </div>
            </div>
        </div>

        <table id="goodsTable" class="table table-bordered table-striped table-hover mt-20 mb-0">
            <thead>
                <tr>
                    <th class="w-30"><input type="checkbox"></th>
                    <th class="w-50">序号</th>
                    <th class="w-360">商品名称</th>
                    <th class="w-80">价格</th>
                    <th>介绍</th>
                    <th class="w-80">库存</th>
                    <th class="w-100">类别</th>
                </tr>
            </thead>

            <tbody></tbody>

            <!--<tr>
                <td><input type="checkbox"></td>
                <td>1</td>
                <td>iphone7</td>
                <td>5000</td>
                <td>苹果7</td>
                <td>100</td>
                <td>电子产品</td>
            </tr>-->
        </table>

        <!--分页-->
        <nav>
            <ul id="pagingUl" class="pagination pull-right">
                <!-- <li><a href="#">&laquo;</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">&raquo;</a></li> -->
            </ul>
        </nav>

    </div>

    <!-- 对话框 -->
    <div class="modal fade" id="goodsDlg">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="dlgTitle">新增商品</h4>
                </div>
                <div class="modal-body">
                    <form id="gForm" class="form-horizontal">
                        <input type="hidden" id="gid" value="0">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="title" placeholder="请输入商品名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">商品照片</label>
                            <div class="col-sm-10">
                                <input type="file" class="form-control" id="pic">
                            </div>
                            <input type="hidden" id="tmpPicName">
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">价格</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="price" placeholder="请输入价格">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">商品介绍</label>
                            <div class="col-sm-10">
                                <textarea id="detail" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">库存</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="amount" placeholder="库存">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">类别</label>
                            <div class="col-sm-3">
                                <select id="classify" class="form-control">
                                    <!-- <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option> -->
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">状态</label>
                            <div class="col-sm-3">
                                <label class="radio-inline">
                                    <input type="radio" name="status" value="1" checked> 上架
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="status" value="0"> 下架
                                </label>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="saveBtn" type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

<!-- js -->
<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../bower_components/layer/layer.js"></script>
<script src="js/goods.js"></script>

</body>
</html>
